<template>
  <div class="app-container pg-pick-task">
    <!-- el-tabs begin -->
    <div ref="pageTab" class="page-tab-box">
      <el-tabs v-model="activeName">
        <el-tab-pane v-for="(item, index) in tabList" :key="`tab-${index}`" :name="item.name">
          <div class="tab-label" slot="label">
            <span class="label-name">{{ item.label }}</span>
            <span v-if="item.name=='returned'" class="label-tip bg_red">{{ item.quantity }}</span>
            <span class="label-tip" v-else>{{ item.quantity }}</span>
          </div>
        </el-tab-pane>
      </el-tabs>
      <div v-if="activeName=='delete'" class="page-tab-child">
        <el-radio-group class="tab-child-group" v-model="activeChildName">
          <el-radio-button :label="90">
            <span class="tab-child-name">待审核</span>
            <span class="number">{{ waybillQuantity.waitAuditDeleteQuantity }}</span>
          </el-radio-button>
          <el-radio-button :label="100">
            <span class="tab-child-name">已删除</span>
            <span class="color-red number">{{ waybillQuantity.successDeleteQuantity }}</span>
          </el-radio-button>
        </el-radio-group>
      </div>
    </div>
    <!-- el-tabs end -->
    <!-- top-search begin -->
    <div ref="topSearch" class="top-search top-more-search" v-show="showSearch">
      <el-form
        inline
        ref="searchForm"
        label-width="0"
        class="search-form"
        :class="{ 'show-more': showFormMore }"
        :model="searchForm">
        <el-form-item prop="cusId">
          <el-select v-model="searchForm.cusId" placeholder="客户名称" clearable @change="search()">
            <el-option label="客户1" value="1"></el-option>
            <el-option label="客户2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="productId">
          <el-select v-model="searchForm.productId" placeholder="运输产品" clearable @change="search()">
            <el-option label="产品1" value="1"></el-option>
            <el-option label="产品2" value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item prop="cusIdOrder">
          <el-input v-model="searchForm.activeNo" placeholder="请输入" clearable @keyup.enter.native="search()">
            <el-select class="w-100" v-model="searchForm.cusIdOrder" slot="prepend" placeholder="请选择" @change="search()">
              <el-option label="客户单号" value="orderNo"></el-option>
              <el-option label="转单号" value="carrierBustNo"></el-option>
              <el-option label="运单号" value="waybillNo"></el-option>
              <el-option label="PO单号" value="waybillEntrustNo"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <el-form-item prop="boxNo">
          <el-input v-model="searchForm.activeCode" placeholder="请输入" clearable @keyup.enter.native="search()">
            <el-select class="w-85" v-model="searchForm.boxNo" slot="prepend">
              <el-option label="箱号" value="bagsCode"></el-option>
              <el-option label="主单号" value="carrierBillNo"></el-option>
            </el-select>
          </el-input>
        </el-form-item>
        <div class="search-more-item" v-show="isBigWindow || showFormMore">
          <div class="append-item">
            <el-form-item prop="activeTime" class="append-l w-100">
              <el-select ref="timeSelect" v-model="searchForm.activeTime">
                <el-option label="发货日期" value="dateRange"></el-option>
                <el-option label="入库日期" value="dateRange1"></el-option>
                <el-option label="出库日期" value="dateRange2"></el-option>
                <el-option label="主单日期" value="dateRange3"></el-option>
                <el-option label="到达海外仓" value="dateRange4"></el-option>
              </el-select>
            </el-form-item>
            <el-form-item prop="dateRange" class="append-r">
              <el-date-picker v-model="searchForm.dateRange" type="daterange" unlink-panels range-separator="-"
                start-placeholder="下单开始日期" end-placeholder="下单截止日期" value-format="yyyy-MM-dd HH:mm:ss" clearable
                :picker-options="pickerOptions" :default-time="['00:00:00', '23:59:59']" @change="search()">
              </el-date-picker>
            </el-form-item>
          </div>
        </div>
        <div class="search-more-item" v-show="showFormMore">
          <el-form-item prop="carrierId">
            <el-select v-model="searchForm.carrierId" placeholder="下家名称" clearable @change="search()">
              <el-option label="下家1" value="1"></el-option>
              <el-option label="下家2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="carrierId">
            <el-select v-model="searchForm.carrierId" placeholder="渠道(可多选)" clearable @change="search()">
              <el-option label="下家1" value="1"></el-option>
              <el-option label="下家2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="isError">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.isError"
              clearable
              placeholder="是否异常"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="waybillTrackStatus">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.waybillTrackStatus"
              clearable
              placeholder="跟踪状态"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="hasTransferNo">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.hasTransferNo"
              clearable
              placeholder="是否有转单号"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="hasLastLeg">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.hasLastLeg"
              clearable
              placeholder="是否有尾程面单"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="isScanned">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.isScanned"
              clearable
              placeholder="是否扫描打印"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="isIntercepted">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.isIntercepted"
              clearable
              placeholder="是否拦截"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="waybillSource">
            <dg-dict-select
              dictType="waybill_source"
              v-model="searchForm.waybillSource"
              clearable
              placeholder="运单来源"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="consigneeStoreName">
            <el-input v-model="searchForm.consigneeStoreName" placeholder="平台店铺" @keyup.enter.native="search()" />
          </el-form-item>
          <el-form-item prop="hasReceivable">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.hasReceivable"
              clearable
              placeholder="是否有应收"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="isReceivableAccounted">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.isReceivableAccounted"
              clearable
              placeholder="应收是否做账"
              @change="search()" />
          </el-form-item>
          <el-form-item prop="isReceivableAccounted">
            <el-select v-model="searchForm.isReceivableAccounted" placeholder="应收账单状态" @change="search()">
              <el-option label="状态1" value="1"></el-option>
              <el-option label="状态2" value="2"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item prop="receivableNo">
            <el-input v-model="searchForm.receivableNo" placeholder="应收账单号" @keyup.enter.native="search()" />
          </el-form-item>
          <el-form-item prop="isForecast">
            <dg-dict-select
              dictType="yes_no"
              v-model="searchForm.isForecast"
              clearable
              placeholder="是否预报"
              @change="search()" />
          </el-form-item>
        </div>
        <el-form-item class="search-btn-part">
          <el-button type="primary" icon="el-icon-search" @click="search()">查询</el-button>
          <el-button icon="el-icon-refresh" @click="resetQuery()">重置</el-button>
          <el-button class="more-btn" type="text" @click="searchShowMore()">{{ !showFormMore ? '更多' : '收起'
          }}<span class="ml5" :class="`el-icon-arrow-${!showFormMore ? 'down' : 'up'}`"></span></el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- top-search end -->
    <!-- right-toolbar begin -->
    <right-toolbar ref="rightToolbar" :showSearch.sync="showSearch" :tableColumn.sync="tableColumn" tableName="owms_order_out_pick_task" @queryTable="search()">
      <template v-slot:operaBar>
        <el-button type="primary" @click="handleShow()">分配任务</el-button>
        <el-button type="primary" @click="handleShow()">开始拣货</el-button>
        <el-button type="danger" @click="handleUpload()">取消任务</el-button>
      </template>
    </right-toolbar>
    <!-- right-toolbar end -->
    <!-- table begin -->
    <el-table ref="pageTable" class="page-table border-all mt10"
      @header-dragend="changeColumnWidth"
      :data="tableData" :row-key="getRowKeys"
      @selection-change="tableSelect"
      :height="tableHeight" border stripe>
      <el-table-column type="selection" width="32" fixed></el-table-column>
      <template v-for="(item, iindex) in tableColumn">
        <el-table-column v-if="filterArrs.includes(item.field)"
          show-overflow-tooltip
          :key="`filter-${iindex}`"
          :label="item.columnTitle"
          :prop="item.columnProperty"
          :width="item.columnWidth">
          <template slot-scope="scope">
            <span>{{ scope.row[item.field] | filterDict(dict.type[item.field=='trackStatus'?'ali_order_type':item.field=='checkWeightStatus'?'check_weight_status':'yes_no']) }}</span>
          </template>
        </el-table-column>
        <el-table-column v-else
          show-overflow-tooltip
          :key="`default-${iindex}`"
          :label="item.columnTitle"
          :prop="item.columnProperty"
          :width="item.columnWidth"
          :fixed="item.field=='orderCode'" />
      </template>
      <el-table-column label="操作" width="112" fixed="right">
        <template slot-scope="scope">
          <div class="opera-row">
            <el-button class="opera-item" type="text" @click="editCustomer(scope.row)">分配</el-button>
            <el-button class="opera-item" type="text" @click="editCustomer(scope.row)">开始</el-button>
            <el-button class="opera-item" type="text" @click="editCustomer(scope.row)">取消</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>
    <!-- table end -->
    <!-- page-pagination begin -->
    <pagination
      class="page-pagination"
      :total="total"
      :page-size="pageSize"
      :page-index="pageIndex"
      @change="pageChange">
    </pagination>
    <!-- page-pagination end -->
  </div>
</template>

<script>
import mixin from '@/utils/filtermixin/mixin';
import listmixin from '@/utils/list-mixin';
import { Foundation } from '@/utils/index';
import * as API_Pick  from '@/api/oms/pick';

export default {
  name: 'pg-pick-task',
  dicts: [],
  mixins: [mixin, listmixin],
  data () {
    return {
      // tab
      tabList: [
        { label: '全部任务', name: 'all', quantity: 0 },
        { label: '待领取', name: 'confirm', quantity: 0 },
        { label: '待拣货', name: 'receive', quantity: 0 },
        { label: '已完成', name: 'send', quantity: 0 }
      ],
      activeName: 'all',
      activeChildName: 90,
      pickerOptions: {
        shortcuts: [{
          text: '最近一周',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近一个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
            picker.$emit('pick', [start, end]);
          }
        }, {
          text: '最近三个月',
          onClick(picker) {
            const end = new Date();
            const start = new Date();
            start.setTime(start.getTime() - 3600 * 1000 * 24 * 90);
            picker.$emit('pick', [start, end]);
          }
        }]
      },
      searchForm: {
        // 搜索
        cusId: undefined,
        orderNo: undefined,
        carrierBustNo: undefined,
        waybillNo: undefined,
        dateRange: [],
        waybillTrackStatus: undefined,
        productId: undefined,
        consigneeCountry: undefined,
        consigneeState: undefined,
        consigneeCity: undefined,
        consigneePostcode: undefined,
        carrierId: undefined,
        carrierChannelIdList: [],
        carrierBillNo: undefined,
        chargeOrgName: undefined,
        isCod: undefined,
        waybillCusVouchStatus: undefined,
        waybillCarrierVouchStatus: undefined,
        waybillStatus: undefined,
        waybillSource: undefined,
        waybillType: undefined,
        remarks: undefined,
        bagsCode: undefined,
        predictionStatus: undefined,
        isPrediction: undefined,
        dateRange1: [],
        dateRange2: [],
        dateRange3: [],
        dateRange4: [],
        isMarkedError: undefined,
        isHadPrint: undefined,
        waybillEntrustNo: undefined,
        isHadLabel: undefined,
        isIntercept: undefined,
        isHadCarrierBustNo: undefined,
        consigneeStoreName: undefined,
        isHadCusCost: undefined,
        isCusVouch: undefined,
        customerVouchCode: undefined,
        isHadCarrierCost: undefined,
        isCarrierVouch: undefined,
        carrierVouchCode: undefined
      },
      // 表格需要格式化的字段
      filterArrs: ['trackStatus', 'pushExpense', 'payStatus', 'checkWeightStatus'],
      tableColumn: [],
      tableData: [],
      // 获取row的key值
      getRowKeys (row) {
        return row.id;
      },
      selectIds: [],
      selectRows: [],

      // 分页属性
      total: 0, // 记录总条数
      pageSize: 20, // 每页显示条数
      pageIndex: 1 // 当前页
    };
  },
  watch: {
    /**
     * @date 2025/07/15
     * @author wolfMan
     * @description {tab 切换}
     */
    activeName() {
      this.search();
    }
  },
  created () {
    // 设置最近 3 天时间
    let start = new Date().getTime() - 3600 * 1000 * 24 * 2;
    start = `${Foundation.unixMillToDate(start).split(' ')[0]} 00:00:00`;
    let end = `${Foundation.unixMillToDate(new Date()).split(' ')[0]} 23:59:59`;
    this.searchForm.dateRange = [
      Foundation.unixMillToDate(start),
      Foundation.unixMillToDate(end)
    ];
  },
  mounted () {
    // 获取页面数据
    this.search();
  },
  methods: {
    /**
      * @date 2025/07/08
      * @author wolfMan
      * @description {页面查询}
    */
    search (_type) {
      let _params = this.MixinFilterParams(this.MixinClone(this.searchForm));
      if (_params.dateRange && _params.dateRange.length) {
        _params.startCreateTime = _params.dateRange[0];
        _params.endCreateTime = _params.dateRange[1];
      };
      delete _params.dateRange;
      // if (!_params.alOrderInput) {
      //   delete _params.alOrderType;
      // };
      // if (!_params.receiverInput) {
      //   delete _params.receiverType;
      // };
      // _params.tabStatus = this.activeName;
      // 重置分页
      if (_type !== 'selectPage') {
        this.pageIndex = 1; // 重置翻页当前页
      };
      this.getPageData(_params);
      // 获取页面统计数据
      // this.getPageTotal(_params);
    },
    /**
      * @date 2025/07/15
      * @author wolfMan
      * @description {获取页面数据}
    */
    getPageData (params) {
      let _params = {
        ...params,
        pageNum: this.pageIndex,
        pageSize: this.pageSize
      };
      API_Pick.getListService(_params).then(response => {
        this.tableData = response.rows;
        this.total = response.total;
      });
    },
    /**
      * @date 2025/07/15
      * @author wolfMan
      * @description {表格行选中}
    */
    tableSelect(_row) {
      this.selectedIds = _row.map((item) => item.id);
      this.selectedRows = _row;
    }
  }
};
</script>